<template>
  <app-container>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <generate-form ref="generateForm" :data="BaseInformation" :remote="remoteFuncs" :value="editData" />
      </el-tab-pane>
      <el-tab-pane label="金额信息" name="second">
        <generate-form ref="generateForm" :data="AmountInformation" :remote="remoteFuncs" :value="editData" />
      </el-tab-pane>
    </el-tabs>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
      <el-button type="primary">取消</el-button>
    </div>
  </app-container>
</template>

<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      activeName: 'first',
      BaseInformation: {
        list: [
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '贷款借据号',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '00980101008',
                      required: true,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: false,
                      clearable: false,
                      remoteFunc: 'func_1542704085000_28542'
                    },
                    key: '1542704085000_28542',
                    model: 'input_1542704085000_28542',
                    rules: [
                      {
                        type: 'string',
                        message: '贷款借据号 ：格式不正确'
                      },
                      {
                        required: true,
                        message: '贷款借据号 ：必须填写'
                      }
                    ]
                  }
                ]
              },
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '贷款账号：',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '00982100000023',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542704088000_19741'
                    },
                    key: '1542704088000_19741',
                    model: 'input_1542704088000_19741',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542704078000_41886'
            },
            key: '1542704078000_41886',
            model: 'grid_1542704078000_41886',
            rules: []
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '合同编号',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '0020010101',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542704219000_8278'
                    },
                    key: '1542704219000_8278',
                    model: 'input_1542704219000_8278',
                    rules: [
                      {
                        type: 'string',
                        message: '合同编号格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '公司代码',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '1001',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542704232000_39537'
                    },
                    key: '1542704232000_39537',
                    model: 'input_1542704232000_39537',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542704212000_2477'
            },
            key: '1542704212000_2477',
            model: 'grid_1542704212000_2477',
            rules: []
          },
          {
            type: 'input',
            name: '成员公司名称',
            icon: 'regular/keyboard',
            options: {
              width: '100%',
              defaultValue: '中兴（沈阳）金融科技有限公司',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: true,
              clearable: false,
              remoteFunc: 'func_1542704280000_73019'
            },
            key: '1542704280000_73019',
            model: 'input_1542704280000_73019',
            rules: [
              {
                type: 'string',
                message: '成员公司名称格式不正确'
              }
            ]
          },
          {
            type: 'select',
            name: '货币代码',
            icon: 'regular/caret-square-down',
            options: {
              defaultValue: 'CNY人民币',
              multiple: false,
              disabled: false,
              clearable: false,
              placeholder: '',
              required: true,
              showLabel: false,
              width: '15%',
              options: [
                {
                  value: 'CNY人民币'
                },
                {
                  value: 'USD美元'
                },
                {
                  value: 'EUR欧元'
                }
              ],
              remote: false,
              remoteOptions: [],
              props: {
                value: 'value',
                label: 'label'
              },
              remoteFunc: 'func_1542704310000_1308'
            },
            key: '1542704310000_1308',
            model: 'select_1542704310000_1308',
            rules: [
              {
                required: true,
                message: '货币代码必须填写'
              }
            ]
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '借据金额',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '3,000,000',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542704413000_75107'
                    },
                    key: '1542704508000_19302',
                    model: 'input_1542704413000_75107',
                    rules: [
                      {
                        type: 'string',
                        message: '借据金额格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '交易金额',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '2,000,000',
                      required: true,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: false,
                      clearable: false,
                      remoteFunc: 'func_1542704415000_31640'
                    },
                    key: '1542704415000_31640',
                    model: 'input_1542704415000_31640',
                    rules: [
                      {
                        type: 'string',
                        message: '交易金额格式不正确'
                      },
                      {
                        required: true,
                        message: '交易金额必须填写'
                      }
                    ]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542704409000_6090'
            },
            key: '1542704409000_6090',
            model: 'grid_1542704409000_6090',
            rules: []
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '可发放金额',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542704510000_19179'
                    },
                    key: '1542704523000_59858',
                    model: 'input_1542704510000_19179',
                    rules: []
                  }
                ]
              },
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '已发放金额',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542704525000_77364'
                    },
                    key: '1542704525000_77364',
                    model: 'input_1542704525000_77364',
                    rules: []
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542704503000_29474'
            },
            key: '1542704503000_29474',
            model: 'grid_1542704503000_29474',
            rules: []
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '贷款入账账号',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '00982100000023',
                      required: true,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: false,
                      clearable: false,
                      remoteFunc: 'func_1542704563000_87487'
                    },
                    key: '1542704563000_87487',
                    model: 'input_1542704563000_87487',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      },
                      {
                        required: true,
                        message: '贷款入账账号必须填写'
                      }
                    ]
                  }
                ]
              },
              {
                span: 6,
                list: [
                  {
                    type: 'select',
                    name: '贷款账户状态',
                    icon: 'regular/caret-square-down',
                    options: {
                      defaultValue: 'N-未生效',
                      multiple: false,
                      disabled: true,
                      clearable: false,
                      placeholder: '',
                      required: false,
                      showLabel: false,
                      width: '100%',
                      options: [
                        {
                          value: 'N-未生效'
                        },
                        {
                          value: 'Y-已生效'
                        }
                      ],
                      remote: false,
                      remoteOptions: [],
                      props: {
                        value: 'value',
                        label: 'label'
                      },
                      remoteFunc: 'func_1542704619000_30814'
                    },
                    key: '1542704619000_30814',
                    model: 'select_1542704619000_30814',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                span: 6,
                list: [
                  {
                    type: 'select',
                    name: '贷款形态',
                    icon: 'regular/caret-square-down',
                    options: {
                      defaultValue: '0-正常',
                      multiple: false,
                      disabled: true,
                      clearable: false,
                      placeholder: '',
                      required: false,
                      showLabel: false,
                      width: '100%',
                      options: [
                        {
                          value: '0-正常'
                        }
                      ],
                      remote: false,
                      remoteOptions: [],
                      props: {
                        value: 'value',
                        label: 'label'
                      },
                      remoteFunc: 'func_1542704621000_18643'
                    },
                    key: '1542704621000_18643',
                    model: 'select_1542704621000_18643',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542704550000_25691'
            },
            key: '1542704550000_25691',
            model: 'grid_1542704550000_25691',
            rules: [
              {
                type: 'string',
                message: '单行文本格式不正确'
              }
            ]
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '还款账号',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '01008001000013',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542704709000_73470'
                    },
                    key: '1542704709000_73470',
                    model: 'input_1542704709000_73470',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                span: 6,
                list: [
                  {
                    type: 'select',
                    name: '贷款展期状态',
                    icon: 'regular/caret-square-down',
                    options: {
                      defaultValue: '2-预展期',
                      multiple: false,
                      disabled: true,
                      clearable: false,
                      placeholder: '',
                      required: false,
                      showLabel: false,
                      width: '100%',
                      options: [
                        {
                          value: '2-预展期'
                        }
                      ],
                      remote: false,
                      remoteOptions: [],
                      props: {
                        value: 'value',
                        label: 'label'
                      },
                      remoteFunc: 'func_1542704716000_47918'
                    },
                    key: '1542704716000_47918',
                    model: 'select_1542704716000_47918',
                    rules: []
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542704703000_23363'
            },
            key: '1542704703000_23363',
            model: 'grid_1542704703000_23363',
            rules: []
          },
          {
            type: 'select',
            name: '应计非应计状态',
            icon: 'regular/caret-square-down',
            options: {
              defaultValue: '1-应计',
              multiple: false,
              disabled: true,
              clearable: false,
              placeholder: '',
              required: false,
              showLabel: false,
              width: '10%',
              options: [
                {
                  value: '1-应计'
                }
              ],
              remote: false,
              remoteOptions: [],
              props: {
                value: 'value',
                label: 'label'
              },
              remoteFunc: 'func_1542704782000_72231'
            },
            key: '1542704782000_72231',
            model: 'select_1542704782000_72231',
            rules: []
          }
        ],
        config: {
          labelWidth: 100,
          labelPosition: 'right'
        },
        table: {
          showRemove: false,
          showIndexCol: false,
          showEdit: false,
          showExport: false,
          showAdd: false,
          stripe: true,
          border: false
        }
      },
      AmountInformation: {
        list: [
          {
            type: 'input',
            name: '合同金额',
            icon: 'regular/keyboard',
            options: {
              width: '30%',
              defaultValue: '300,000',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: true,
              clearable: false,
              remoteFunc: 'func_1542706597000_80126'
            },
            key: '1542706715000_48155',
            model: 'input_1542706597000_80126',
            rules: [
              {
                type: 'string',
                message: '合同金额格式不正确'
              }
            ]
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '正常本金',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '30,000',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542706618000_11379'
                    },
                    key: '1542706618000_11379',
                    model: 'input_1542706618000_11379',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '逾期本金',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '0.00',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542706621000_17035'
                    },
                    key: '1542706621000_17035',
                    model: 'input_1542706621000_17035',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542706613000_32043'
            },
            key: '1542706613000_32043',
            model: 'grid_1542706613000_32043',
            rules: []
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '呆滞本金',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '0.00',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542706665000_67128'
                    },
                    key: '1542706665000_67128',
                    model: 'input_1542706665000_67128',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '呆账本金',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '0.00',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542706667000_83085'
                    },
                    key: '1542706667000_83085',
                    model: 'input_1542706667000_83085',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542706662000_45548'
            },
            key: '1542706662000_45548',
            model: 'grid_1542706662000_45548',
            rules: []
          },
          {
            type: 'input',
            name: '贷款损失准备金',
            icon: 'regular/keyboard',
            options: {
              width: '20%',
              defaultValue: '0.00',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: true,
              clearable: false,
              remoteFunc: 'func_1542706597000_80126'
            },
            key: '1542706597000_80126',
            model: 'input_1542706597000_80126',
            rules: [
              {
                type: 'string',
                message: '贷款损失准备金格式不正确'
              }
            ]
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '本期期数',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542706740000_52994'
                    },
                    key: '1542706740000_52994',
                    model: 'input_1542706740000_52994',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '执行利率',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '6.0000000',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542706753000_6362'
                    },
                    key: '1542706753000_6362',
                    model: 'input_1542706753000_6362',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542706736000_43821'
            },
            key: '1542706736000_43821',
            model: 'grid_1542706736000_43821',
            rules: []
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '本金合计',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542706799000_65624'
                    },
                    key: '1542706799000_65624',
                    model: 'input_1542706799000_65624',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                span: 6,
                list: [
                  {
                    type: 'input',
                    name: '利息合计',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542706803000_99169'
                    },
                    key: '1542706803000_99169',
                    model: 'input_1542706803000_99169',
                    rules: [
                      {
                        type: 'string',
                        message: '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542706772000_22369'
            },
            key: '1542706772000_22369',
            model: 'grid_1542706772000_22369',
            rules: []
          }
        ],
        config: {
          labelWidth: 100,
          labelPosition: 'right'
        },
        table: {
          showRemove: false,
          showIndexCol: false,
          showEdit: false,
          showExport: false,
          showAdd: false,
          stripe: true,
          border: false
        }
      },

      editData: {},
      values: {},
      remoteFuncs: {
        DocumentType(resolve) {
          // 财务联系人证件类型 select_1542593220000_86649
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('财务联系人证件类型').then(response => {
            resolve(response.data)
          })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm
        .getData()
        .then(data => {
          // 数据校验成功
          // data 为获取的表单数据
        })
        .catch(e => {
          // 数据校验失败
        })
    }
  }
}
</script>

<style scoped>
</style>
